estoy usando la casilla de verificación de entrada múltiple para mi entrada de formulario en reaccionar. como la imagen de abajo:

esta es una parte de mi código:

 interface CheckType { id: any; desc: string; checked: boolean; } interface CheckListInputProps { options: Array<CheckType>; onChange: (e: React.ChangeEvent<HTMLInputElement>, data: Array<CheckType>) => void } const CheckListInput: React.FC<CheckListInputProps> = ({options, onChange}) => { const [initOpt, setInitOpt] = useState<Array<CheckType>([]) useEffect(()=>{ setInitOpt(options); },[options]) const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => { let {value, checked} = e.currentTarget let index = initOpt.findIndex(item => item.id===value); initOpt[index].checked = checked setInitOpt(initOpt) onChange(e, initOpt); } return ( <div> { initOpt.map((item, index) => ( <div key={index}> <input value={item.id} checked={item.checked} onChange={changeHandler}/> <label>{item.desc}</label> </div> )} </div>) }

cuando llamé a esta función en otro archivo:

 const ChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, data: Array<any>) => { console.log(data); } const options = [ {id: 0, desc: "GET", checked: false}, {id: 1, desc: "POST", checked: false}, {id: 2, desc: "DELETE", checked: false} ] return <CheckListInput options={options} onChange={ChangeHandler}/

todo funciona bien el registro muestra lo que quiero. pero el problema está en la interfaz, la casilla de verificación no cambiará a marcada o desmarcada. ¿Cómo puedo solucionar esto? ¿Hay algún problema con esto checked={item.checked}